<template>
  <div class="pad">
    <!-- 搜索栏 -->
    <search-bar @handleSearch="init"
                placeHolder="请输入公司名称/负责人" />
    <!-- 表格数据展示 -->
    <table-date-el :tableData="aloneData.list"
                   :tableLabel="aloneLabel"
                   @handleServiceCharge="handleServiceChargeDialog"
                   :page.sync="page"
                   :pageCount="aloneData.rows"
                   :pageSize.sync="pageSize"
                   v-loading="loading"
                   @operatorList="handleSetOperator" />
    <v-dialog :show.sync="mdfServiceDialog"
              title="修改工时费"
              width="30%">
      <el-input v-model="serviceNum"
                placeholder="请输入工时费"
                style="width:75%;margin-right:6%;"
                ref="serviceMoneyForm"
                id="mdfServiceNum">
        <template slot="append">￥</template>
      </el-input>
      <el-button type="primary"
                 @click="handleConfirmMdyService">修改</el-button>
    </v-dialog>
    <!-- 设置供应商和推荐人弹框 -->
    <!--<v-dialog title='运营商列表'-->
              <!--:show.sync="isShowOperatorList">-->
      <!--<table-date-el height="20vh"-->
                     <!--:border="true"-->
                     <!--:tableData="operatorList.list"-->
                     <!--:tableLabel="operatorListLabel"-->
                     <!--@setOperator="handleSetOperator"-->
                     <!--@handleReferee="showReferee"-->
                     <!--@handleCheckReferee="checkReferee"-->
                     <!--:page.sync="supplierPage"-->
                     <!--:pageSizes="[4,6,8]"-->
                     <!--:pageSize="supplierPageSize"-->
                     <!--:pageCount="operatorList.rows" />-->
      <!-- 设置供应商弹框 -->
      <el-dialog width="25%"
                 title="供应商"
                 center
                 :visible.sync="isShowSupplier"
                 @close=" supplierValue = '' ">
        <template>
          <el-select v-model="supplierValue"
                     placeholder="请选择供应商"
                     size="medium"
                     style="margin-right:8%;width:55%;">
            <el-option v-for="(item, index) in supplierList"
                       :key="index"
                       :value="item.id"
                       :label="item.name" />
          </el-select>
          <el-button size="medium"
                     type="primary"
                     @click="confirmSetSupplier">确定</el-button>
          <el-button size="medium"
                     type="danger"
                     @click="isShowSupplier = false">取消</el-button>
        </template>
      </el-dialog>

      <!--&lt;!&ndash; 设置推荐人弹框 &ndash;&gt;-->
      <!--<el-dialog width="40%"-->
                 <!--title="设置推荐人"-->
                 <!--center-->
                 <!--:visible.sync="isShowreferee"-->
                 <!--append-to-body-->
                 <!--@close="result = false, promoCode = '', Object.keys(form).map((key) => form[key] = '')">-->
        <!--<template>-->
          <!--<div>-->
            <!--<el-input v-model="promoCode"-->
                      <!--style="width:83%;margin-right:3%;"-->
                      <!--placeholder="请输入推广码"></el-input>-->
            <!--<el-button type="primary"-->
                       <!--@click="searchRefereeCode">搜索</el-button>-->
          <!--</div>-->
          <!--<div v-if="result"-->
               <!--class="result">-->
            <!--<div class="result"-->
                 <!--style="margin-top:10px;">搜索结果：</div>-->
            <!--<el-form label-position="right"-->
                     <!--label-width="130px"-->
                     <!--:model="form"-->
                     <!--style="margin-top:20px;"-->
                     <!--:rules="rules"-->
                     <!--ref="ruleForm">-->
              <!--<el-form-item label="用户名称">-->
                <!--{{form.name}}-->
              <!--</el-form-item>-->
              <!--<el-form-item label="手机号码">-->
                <!--{{form.phone}}-->
              <!--</el-form-item>-->
              <!--<el-form-item label="车牌号">-->
                <!--{{form.u_plate}}-->
              <!--</el-form-item>-->
              <!--<el-form-item label="推广奖励"-->
                            <!--prop="money">-->
                <!--<el-input v-model="form.money"-->
                          <!--placeholder="请输入推广奖励"-->
                          <!--style="width: 45%;"-->
                          <!--size="mini"> </el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="职业"-->
                            <!--prop="address">-->
                <!--<el-input style="width: 45%;"-->
                          <!--v-model="form.address"-->
                          <!--placeholder="请输入地址"-->
                          <!--:disabled="Boolean(form.address)"-->
                          <!--size="mini"></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="地址"-->
                            <!--prop="occupation">-->
                <!--<el-input style="width:45%;"-->
                          <!--v-model="form.occupation"-->
                          <!--placeholder="请输入职业"-->
                          <!--:disabled="Boolean(form.occupation)"-->
                          <!--size="mine"></el-input>-->
              <!--</el-form-item>-->
            <!--</el-form>-->
          <!--</div>-->
        <!--</template>-->
        <!--<template slot="footer"-->
                  <!--v-if="result">-->
          <!--<el-button type="primary"-->
                     <!--@click="setReferr('ruleForm')">设置</el-button>-->
          <!--<el-button type="danger"-->
                     <!--@click="isShowreferee = false">取消</el-button>-->
        <!--</template>-->
      <!--</el-dialog>-->

      <!--&lt;!&ndash; 查看推荐人弹框 &ndash;&gt;-->
      <!--<el-dialog width="30%"-->
                 <!--center-->
                 <!--title="推荐人详情"-->
                 <!--:visible.sync="isShowCheckReferee"-->
                 <!--append-to-body-->
                 <!--@close="Object.keys(form).map((key) => form[key] = '')">-->
        <!--<template>-->
          <!--<el-form label-position="right"-->
                   <!--label-width="60px"-->
                   <!--:model="form"-->
                   <!--:rules="rules"-->
                   <!--class="myForm">-->
            <!--<el-form-item label="姓名:">-->
              <!--{{form.name}}-->
            <!--</el-form-item>-->
            <!--<el-form-item label="电话:">-->
              <!--{{form.phone}}-->
            <!--</el-form-item>-->
            <!--<el-form-item label="车牌号:">-->
              <!--{{form.u_plate}}-->
            <!--</el-form-item>-->
            <!--<el-form-item label="省市:">-->
              <!--{{form.address}}-->
            <!--</el-form-item>-->
            <!--<el-form-item label="职业:">-->
              <!--{{form.occupation}}-->
            <!--</el-form-item>-->
            <!--<el-form-item label="奖励金:">-->
              <!--{{form.money}}-->
            <!--</el-form-item>-->
          <!--</el-form>-->
        <!--</template>-->
        <!--<template slot="footer">-->
          <!--<el-button type="danger"-->
                     <!--size="samll"-->
                     <!--@click=" isShowCheckReferee = false">关闭</el-button>-->
        <!--</template>-->
      <!--</el-dialog>-->
    <!--</v-dialog>-->
  </div>
</template>

<script>
  import tableDateEl from '@/views/Setup/common/table'

  export default {
  name: "settingsAlone",
  components: {
    tableDateEl
  },
  data () {
    return {
      aloneData: [], //单独设置数据
      aloneLabel: [
        {
          label: '公司名称',
          prop: 'company'
        },
        {
          label: '负责人',
          prop: 'leader'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '工时费',
          prop: 'shop_hours',
          mdyMoney: true,
          methodName: 'handleServiceCharge'
        },
        {
          label: '系统开通时间',
          prop: 'audit_time'
        },
        {
          label: '设置供应商',
          prop: '',
          detail: true,
          btnText: '详情',
          methodName: 'operatorList'
        }
      ], //单独设置数据对应的标题
      page: 1, //单独设置数据当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      activeDate: ['', ''], //选中的日期
      mdfServiceDialog: false, //修改服务费弹框默认隐藏
      serviceNum: '', //服务费数值
      oldNum: '',
      currentItem: {}, //当前数据
      loading: false,
      operatorList: [], //运营商列表数据
      supplierPage: 1,//运营商列表数据的当前页
      supplierPageSize: 4,//运营商列表数据条数/页
      operatorListLabel: [ //运营商列表数据对应的标题
        {
          label: '维修厂名称',
          prop: 'company'
        },
        {
          label: '负责人',
          prop: 'leader'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '设置供应商',
          prop: '',
          detail: true,
          btnText: '设置',
          methodName: 'setOperator'
        },
        {
          label: '推荐人',
          prop: 'share_person',
          referee: true

        }
      ],
      isShowOperatorList: false, //运营商弹框
      isShowSupplier: false, //设置供应商弹框
      supplierList: [], //供应商数据
      supplierValue: '',//选中的供应商ID
      isDisabled: false,
      sid: '', //运营商ID
      isShowreferee: false, //设置推荐人弹框
      promoCode: '', //推广码
      resultText: null,
      form: { //推荐人数据
        name: '',
        phone: '',
        u_plate: '',
        unionId: '',
        address: '',
        occupation: '',
        table: '',
        money: ''
      },
      result: false, //搜索结构显示隐藏
      rules: { //设置推荐人表单验证
        money: [
          { required: true, message: '请输入推广奖励', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        occupation: [
          { required: true, message: '请输入职业', trigger: 'blur' }
        ]
      },
      isShowCheckReferee: false //查看推荐人弹框
    }
  },
  methods: {
    async init (searchkey = this.searchkey) { //页面初始化渲染数据
      this.loading = true;
      let valueStr = Object.assign(searchkey,{page: this.page, pageSize: this.pageSize});
      let res = await this.api.settingAlone(valueStr);
      this.aloneData = res.data;
      this.loading = false;
    },
    handleServiceChargeDialog (val) { //服务费弹框
      this.currentItem = val;
      this.serviceNum = this.currentItem['shop_hours'];
      this.oldNum = this.currentItem['shop_hours'];
      this.mdfServiceDialog = true;
    },
    async handleConfirmMdyService () { //修改服务费
      if (this.serviceNum == this.oldNum) return false;
      this.oldNum = this.serviceNum;
      let argumentsStr = {
        aid: this.currentItem['aid'],
        id: this.currentItem['id'],
        money: document.querySelector('#mdfServiceNum').value
      };
      let res = await this.api.mdySettingAlone(argumentsStr);
      this.$message({
        message: res.msg,
        type: res.code === 1 ? 'success' : 'error'
      });
      this.init();
      this.mdfServiceDialog = false;
    },
    async handleOperatorList () {  //获取运营商列表
      let res = await this.api.setSupplierList({page: this.supplierPage, pageSize: this.supplierPageSize});
      this.operatorList = res.data;
      this.isShowOperatorList = true;
    },
    async handleSetOperator (...value) { //设置供应商前返回的数据
      this.sid = value[1].id;
      let res = await this.api.supplierList({sid: value[1].id});
      this.supplierList = res.data;
      this.supplierList.filter((item) => {
        if (item.mo) {
          this.supplierValue = item.id;
        }
      });
      this.isShowSupplier = true;
    },
    async confirmSetSupplier () { //设置供应商
      let res = await this.api.setSupplier({gid: this.supplierValue, sid: this.sid});
      this.$message({
        type: res.code === 1 ? 'success' : "error",
        message: res.msg
      });
      this.isShowSupplier = false;
    },
    showReferee (value) {
      this.isShowreferee = true;
      this.sid = value.id;
    },
    // async searchRefereeCode () { //搜索推广码
    //   this.result = false;
    //   let res = await this.api.codeSearch({promo_code: this.promoCode});
    //   if (res.code) {
    //     Object.assign(this.form, res.data.list);
    //     this.result = true;
    //   } else {
    //     this.$message({
    //       type: 'error',
    //       message: res.msg
    //     })
    //   }
    // },
    // async setReferr (formName) { //设置推荐人
    //   let flag = true;
    //   this.$refs[formName].validate((valid) => {
    //     if (!valid) {
    //       flag = false;
    //     }
    //   });
    //   if (flag) {
    //     // console.log(Object.assign({},this.form,{ id: this.sid, prome_code: this.promoCode}));
    //     this.api.setReferr(Object.assign({}, this.form, { id: this.sid, promo_code: this.promoCode })).then(res => {
    //       this.$message({
    //         type: res.code === 1 ? 'success' : 'error',
    //         message: res.msg
    //       });
    //       this.handleOperatorList();
    //       this.isShowreferee = false
    //     });
    //
    //   }
    //
    //   // console.log(this.form)
    // },
    // checkReferee (value) {  //查看推荐人
    //   this.isShowCheckReferee = true;
    //   Object.assign(this.form, value)
    // }
  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    },
    supplierPage () {
      this.handleOperatorList()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .pad {padding:0 10px;}
.result >>> .el-input__inner {
  border: none;
  border-bottom: solid 1px #dcdfe6;
}
.result >>> .el-form-item:nth-of-type(1),
.result >>> .el-form-item:nth-of-type(2),
.result >>> .el-form-item:nth-of-type(3),
.myForm .el-form-item {
  margin-bottom: 5px;
}
</style>
